<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车列表</title>
    <link rel="stylesheet" href="css/ShopCart.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="font_571425_cjvso7da05wv1jor/iconfont.css">
    <script src="jq/jquery-1.11.1.min.js"></script>
    <script src="js/Cookie.jQuery.1.0.js"></script>
</head>
<body>
<div class="header">
    <div class="main">
        <div class="header_left">
            <ul>
                <li>欢迎来到知我！这里，用专业呵护美丽。</li>
                <li><a href="">请登录</a></li>
                <li><a href="">快速注册</a></li>
            </ul>
        </div>
        <div class="header_right">
            <ul>
                <li>
                    <a href="" class="iconfont">微信商城&#xe611;</a>
                    <div class="header_xiala">
                        <img src="images/wechat_ewm1.jpg" alt="" width="60" height="60">
                    </div>
                </li>
                <li><a href="" target="_blank" class="iconfont">&#xe67e;手机知我</a></li>
                <li>
                    <a href="" class="iconfont">我的小窝&#xe611;</a>
                    <div class="header_xiala">
                        <ul>
                            <li><a href="" rel="nofollow">我的订单</a></li>
                            <li><a href="" rel="nofollow">我的优惠券</a></li>
                            <li><a href="" rel="nofollow">我的收藏</a></li>
                            <li><a href="" rel="nofollow">我的预订</a></li>
                            <li><a href="" rel="nofollow">我的积分</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="" class="iconfont">客服服务&#xe611;</a>
                    <div class="header_xiala">
                        <ul>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">帮助中心</a></li>
                            <li><a href="">帮助中心</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="header_center">
    <div class="main">
        <div class="header_clogo">
            <a href=""><img src="images/logo.jpg" alt=""></a>
        </div>
        <div class="header_payflow_img">
            <ul class="step_img">
                <li class="step_item">
                    <span class="step_num">1</span>
                    <span class="step_line">
                        <i style="display: block"></i>
                    </span>
                </li>
                <li class="step_item">
                    <span class="step_line">
                        <i></i>
                    </span>
                    <span class="step_num">2</span>
                    <span class="step_line">
                        <i></i>
                    </span>
                </li>
                <li class="step_item">
                    <span class="step_line">
                        <i></i>
                    </span>
                    <span class="step_num">3</span>
                </li>
            </ul>
            <ul class="step_txt">
                <li class="step_txt_1 step_item_present">我的购物车</li>
                <li class="step_txt_2">确认订单信息</li>
                <li class="step_txt_3">成功提交订单</li>
            </ul>
        </div>
    </div>
</div>

<div class="shopcar_contbox">
    <div style="display: none" class="shopcar_empty">
        <div class="shopcar_empty_img"><img src="images/empty.png" alt=""></div>
        <div class="shopcar_empty_tip">
            <p class="shopcar_empty_tip1">您的购物车中没有商品，请先去挑选心爱的商品吧！</p>
            <p class="shopcar_empty_tip2">
                <span>您可以</span>
                <a href="">返回首页</a>
                <span>挑选喜欢的商品！</span>
            </p>
        </div>
    </div>
    <div class="my_cart_list">
        <div class="table_nav">
            <ul>
                <li class="table_nav_name" style="margin-left: -30px">选购的商品</li>
                <li class="table_nav_price">单价</li>
                <li class="table_nav_amount">数量</li>
                <li class="table_nav_allpay">金额小计</li>
                <li class="table_nav_operate">操作</li>
            </ul>
        </div>
        <div class="table_cont">
            <table class="table_item">
                <tbody>
                    <!--<tr>-->
                        <!--<td class="table_nav_name">-->
                            <!--<div>-->
                                <!--<p class=selpro_img"">-->
                                    <!--<img src="" alt="" width="100%" height="100%">-->
                                <!--</p>-->
                                <!--<div class="selpro_info">-->
                                    <!--<p class="selpro_name">-->
                                        <!--<a href=""></a>-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</td>-->
                        <!--<td class="table_nav_price">-->
                            <!--<p>-->
                                <!--￥<span></span>-->
                            <!--</p>-->
                        <!--</td>-->
                        <!--<td class="table_nav_amount">-->
                            <!--<p class="header_ginfo_amount">-->
                                <!--<input type="text" class="">-->
                            <!--</p>-->
                        <!--</td>-->
                        <!--<td class="table_nav_allpay">-->
                            <!--<p></p>-->
                        <!--</td>-->
                        <!--<td class="table_nav_operate">-->
                            <!--<p>-->
                                <!--<a href="javascript:void(0)"></a>-->
                            <!--</p>-->
                        <!--</td>-->
                    <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>
</div>



<div class="public_footer"></div>
<script src="js/footer.js"></script>
</body>
</html>
<script>
    $(function () {
        $(".header_right>ul>li").mouseover(function () {
            $(this).find(".header_xiala").stop().slideDown(200);
        })
        $(".header_right>ul>li").mouseout(function () {
            $(this).find(".header_xiala").stop().slideUp(200);
        })
        var Arr=JSON.parse($.getCookie("shop_cart") || `[]`);
        console.log(Arr);
        for(var i=0;i<Arr.length;i++){

            var str="";
        str+='<tr><td class="table_nav_name"><div>';
        str+='<p class=selpro_img""> <img src="" alt="" width="100%" height="100%"> </p>';
        str+='<div class="selpro_Info">';
        str+='<p class="selpro_name">';
        str+='<a href="">'+Arr[i].Info+'</a>';
        str+=' </p>';
        str+=' </div>';
        str+='</div>';
        str+='</td>';
        str+='<td class="table_nav_price">';
        str+='<p>';
        str+='￥<span>'+Arr[i].Price+'</span>';
        str+='</p>';
        str+='</td>';
        str+='<td class="table_nav_amount">';
        str+='<p class="header_ginfo_amount">';
        str+=Arr[i]["oNumber"];
        str+='</p>';
        str+='</td>';
        str+='<td class="table_nav_allpay">';
        str+='<p>'+Arr[i].Price*Arr[i]["oNumber"]+'</p>';
        str+='</td>';
        str+='<td class="table_nav_operate">';
        str+='<p>';
        str+='<a href="javascript:void(0)" class="shanchu" data="'+Arr[i].Id+'">删除</a>';
        str+='</p>';
        str+='</td></tr>';
        $("tbody").append(str);
            }
            $(document).on("click",".shanchu",function () {
                var CookieArr = JSON.parse($.getCookie("shop_cart") || `[]`);
//                $.removeCookie("shop_cart");
                var remove=$(this).attr("data");
                for (var i=0;i<CookieArr.length;i++){
                    if(CookieArr[i]["Id"]==remove){
                        var newCookie=CookieArr[i].splice(i,1);
                        $.SetCookie("shop_cart",JSON.stringify(newCookie),10);
                        break;
                    }
                }

            })
        if($.getCookie("shop_cart")=='[]'){
            $(".shopcar_contbox").eq(0).show().siblings().hide();
        }else{
            $(".shopcar_contbox").eq(1).show().siblings().hide();
        }
    })
</script>